{% extends "base.html" %}

{% block title %}Produtos{% endblock %}

{% block js %}
<script type="text/javascript" src="/media/js/produtos.js"></script>
{% endblock %}

{% block conteudo %}

<section class="produtos">
    <h2>Produtos disponíveis</h2>
    
    <p><a class="voltar" href="/pedido/{{mesa_id}}">Exibir pedido</a></p>
    
    {% if mensagem %}
    <p id="mensagem">{{ mensagem }}</p>
    {% endif %}
    
    {% if aviso %}
    <p id=aviso>{{ aviso }}</p>
    {% endif %}
    
    {% for categoria in lista_categorias %}
   	<ul>
   		<li><a class="mostrar" href="#mostrar_{{ categoria }}">{{ categoria }}</a></li>
   	</ul>
    {% endfor %}
    
    {% for categoria in lista_categorias %}
        <p><a class="esconder" id="mostrar_{{ categoria }}" href="javascript:show({{ categoria }})">{{ categoria }}</a><p>
        <section class="categoria" id="{{ categoria }}">
	        {% for produto in categoria.lista_produtos %}
	            <form action="/pedido/adicionar/" method="post">{% csrf_token %}
	                <input type="hidden" name="mesa_id" value="{{ mesa_id }}" />
	                <input type="hidden" name="produto_id" value="{{ produto.id }}" />
		            <table>
		                <tr>
		                    <th class="descricao">{{ produto.descricao }} - {{ produto.codigo }}</th>
		                </tr>
		                <tr>
		                    <td>
                            {% if produto.imagem %}
                            <img src="{{produto.imagem.url}}" alt="{{ produto.descricao }}" height="200"  />
                            {% else %}
                            <img src="/media/galeria/images/sem_imagem.jpg" alt="{{ produto.descricao }}" height="200"  />
                            {% endif %}
                            </td>
		                </tr>
		                <tr>
	                       <td class="preco">R$ {{ produto.preco_de_venda }}</td>
	                    </tr>
		                <tr>
	                        <td><input type="button" name="less" value="-" onclick="decremente(this.form);" /><input class="campo" type="text" readonly="readonly"  name="quantidade" value="0" /><input type="button" name="more" value="+" onclick="incremente(this.form);" /></td>
	                    </tr>
	                    <tr>
	                        <td><input type="submit" name="b" value="Incluir" /></td>
	                    </tr>
		            </table>
	            </form>
	        {% endfor %}
        </section>
    {% endfor %}
    
    <p><a class="voltar" href="/pedido/{{mesa_id}}">Exibir pedido</a></p>
</section>

{% endblock %}

